<template>
  <div class="big-body product-detail">
    <van-nav-bar fixed title="商品详情" left-text="返回" left-arrow @click-left="$router.go(-1)" />
    <!-- 轮播图 -->
   <img src="https://mall.s.maizuo.com/86d8414272e50b4b9a7b185ac30dfc86.png" alt />

    <!-- 商品介绍 -->
    <Intro :product="product"></Intro>

    <!--图文详情  -->
    <Pics></Pics>

    <!-- 底部购物车 -->
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" to="/chat" />
      <van-goods-action-icon icon="like-o" text="收藏" />
      <van-goods-action-icon icon="cart-o" text="购物车" :info="cartNum | handleNum" to="/cart" />
      <div class="fg1"></div>
      <div class="flex">
        <van-goods-action-button type="warning" text="加入购物车" :loading="loading" @click="addCart" />
        <van-goods-action-button type="danger" text="立即购买" />
      </div>
    </van-goods-action>
  </div>
</template>
<script>
import { GoodsAction, GoodsActionIcon, GoodsActionButton } from "vant";
import Swiper from "./detail/Swiper";
import Intro from "./detail/Intro";
import Pics from "./detail/Pics";
export default {
  components: {
    [GoodsAction.name]: GoodsAction,
    [GoodsActionIcon.name]: GoodsActionIcon,
    [GoodsActionButton.name]: GoodsActionButton,
    Swiper,
    Intro,
    Pics
  },

  data() {
    return {
      cartNum: 0,
      loading: false,
      banners: [],
      product: {},
      // 描述图片
      descPics: [],
      radio: "1"
    };
  },

  filters: {
    handleNum(cartNum) {
      return cartNum > 0 ? cartNum : "";
    }
  },

  created() {
    let productId = this.$route.params.productId;
    this.getProductDetail(productId);
  },

  methods: {
    // 添加到购物车
    async addCart() {
      try {
        this.loading = true;
        let productId = this.$route.params.productId;
        let url = `/cart/add`;
        let res = await this.$get(url, {
          productId,
          buyNum: 1
        });
        this.cartNum++;
      } catch (error) {
        this.$fail(error);
      }
      this.loading = false;
    },

    // 获取商品详情
    async getProductDetail(productId) {
      try {
        this.$loading(true);
        let url = `/product/detail?productId=${productId}`;
        let res = await this.$axios.get(url);
        this.banners = res.result.banners;
        this.product = res.result;
        this.cartNum = res.result.cartNum;
        this.descPics = res.result.descPics;
      } catch (error) {
        this.$fail(error);
      }
      this.$loading(false);
    },

    goBack() {
      this.$router.go(-1);
    },
    buyImmediate() {
      this.$router.push("/order/confirm");
    },
    onClickIcon() {
      this.$router.push("/cart/befor");
    },
    onClickButton() {},
    onChange(index) {
      this.current = index;
    }
  }
};
</script>

<style lang="less">
@import "./detail.less";
.product-detail {
  .van-goods-action-button--first {
    width: 150px;
    border-bottom-left-radius: 0;
  }
  .van-goods-action-button--last {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
}
</style>

